<template>
    <div class="login">
        <div class="login-main">
            <img
                    class="lm-left"
                    src="../../assets/img/login-left.svg"
                    alt=""
            >
            <div class="lm-right">
                <h1>铭朗云定制</h1>
                <div class="lmr-tab">
                    <p
                            @click="tabCurrent = 1"
                            :class="tabCurrent === 1 ? 'active' : ''"
                    >密码登录</p>
                    <p
                            @click="tabCurrent = 2"
                            :class="tabCurrent === 2 ? 'active' : ''"
                    >短信登录</p>
                </div>
                <div class="lmr-form">
                    <UsernameForm v-if="tabCurrent === 1" />
                    <PhoneForm v-if="tabCurrent === 2" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import PhoneForm from "./phone-form";
    import UsernameForm from "./username-form";

    export default {
        components: {
            PhoneForm,
            UsernameForm,
        },
        data() {
            return {
                tabCurrent: 1,
            };
        },
    };
</script>

<style lang="scss" scoped>
    .login {
        width: 100%;
        height: calc(100vh);
        background-image: url("../../assets/img/login-banner.png");
        display: flex;
        align-items: center;
        justify-content: center;
        .login-main {
            width: 690px;
            height: 416px;
            background: #ffffff;
            box-shadow: 0px 2px 8px 0px rgba(224, 224, 224, 0.5);
            border-radius: 14px;
            display: flex;
            .lm-left {
                width: 50%;
            }
            .lm-right {
                width: 50%;
                box-sizing: border-box;
                padding: 20px 30px;
                h1 {
                    color: #3c3c3c;
                    font-size: 24px;
                    font-weight: 900;
                    margin: 0;
                }
                .lmr-tab {
                    display: flex;
                    align-items: center;
                    margin-top: 25px;
                    p {
                        color: #bababa;
                        font-size: 14px;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                    .active {
                        color: #3c3c3c;
                        font-size: 16px;
                        font-weight: 600;
                    }
                }
                .lmr-form {
                    margin-top: 20px;
                    height: 230px;
                }
            }
        }
    }
</style>
